<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>品牌管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <div class="container">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">品牌管理</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="id">id</label>
                            <input type="text" class="form-control" id="id" placeholder="请输入id" v-model='id'
                                @keyup.enter='add'>
                        </div>
                        <div class="form-group">
                            <label for="neme">name</label>
                            <input type="email" class="form-control" id="neme" placeholder="请输入名字" v-model='name'
                                @keyup.enter='add'>
                        </div>
                        <button type="button" class="btn btn-primary" @click='add'>提交</button>
                        <div class="form-group">
                            <input type="text" class="form-control" id="keywords" placeholder="请输入关键字"
                                v-model='keywords' @input='handleInput'>
                        </div>
                    </form>
                </div>
            </div>


            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>citme</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for='(item,index) in  getSearchList() '>
                        <td>{{item.id}}</td>
                        <td>{{item.name | nameFiles}}</td>
                        <td>{{item.citme | time('YYYY/MM/DD hh:mm')}}</td>
                        <td><a href="#" @click.prevent='del(index,item)'>删除</a></td>
                    </tr>
                </tbody>
            </table>

        </div>


    </div>
    <script>
        // 定义构造器
        Vue.filter('time', function (data, format) {
            console.log(format)
            const y = data.getFullYear()
            const m = (data.getMonth() + 1).toString().padStart(2, '0')
            const d = data.getDate().toString().padStart(2, '0')
            const h = data.getHours()
            const mi = data.getMinutes().toString().padStart(2, '0')
            const s = data.getSeconds().toString().padStart(2, '0')
            // return year + '/' + month + '/' + day + ' ' + hour + ':' + min 
            return format.replace('YYYY', y)
                .replace('MM', m)
                .replace('DD', d)
                .replace('hh', h)
                .replace('mm', mi)
                .replace('ss', s)
        })
        // 定义实例化对象
        const vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                citme: '',
                keywords: '',
                list: [{ id: 1, name: '宝马', citme: new Date() },
                { id: 2, name: '野马', citme: new Date() }],

            },
            methods: {
                // 添加
                add() {
                    // 判断id是否填写
                    if (!this.id) {
                        alert("请填写id")
                        return;
                    }
                    // 判断name是否填写
                    if (!this.name) {
                        alert("请填写name")
                        return;
                    }
                    // 判断是否重复
                    if (this.list.some(item => item.id == this.id)) {
                        alert('id重复')
                        return
                    }
                    // 添加此项数据
                    this.list.push({
                        id: this.id,
                        name: this.name,
                        citme: new Date()
                    }
                    )
                },
                // 删除
                del(index) {
                    console.log(index)
                    this.list.splice(index, 1)
                },
                // 搜索
                handleInput() {
                },
                getSearchList() {
                    return this.list.filter(item => item.name.includes(this.keywords))
                }
            },
            // 给名字添加书名号
            filters: {
                nameFiles(data) {
                    return '《' + data + '》'
                }
            }

        })
    </script>
</body>

</html>